// ServicePanel.vue
<script setup lang="ts">
const emit = defineEmits<{
    close: []
}>()

const onClose = () => {
    emit('close')
}
</script>

<template>
    <view class="service-panel">
        <!-- 关闭按钮 -->
        <text class="close icon-close" @tap="onClose"></text>
        <!-- 标题 -->
        <view class="title">服务说明</view>
        <!-- 内容 -->
        <view class="content">
            <view class="item">
                <view class="dt">无忧退货</view>
                <view class="dd">
                    自收到商品之日起30天内，可在线申请无忧退货服务（食品等特殊商品除外）
                </view>
            </view>
            <view class="item">
                <view class="dt">快速退款</view>
                <view class="dd">
                    收到退货包裹并确认无误后，将在48小时内办理退款，
                    退款将原路返回，不同银行处理时间不同，预计1-5个工作日到账
                </view>
            </view>
            <view class="item">
                <view class="dt">满88元免邮费</view>
                <view class="dd">
                    单笔订单金额(不含运费)满88元可免邮费，不满88元， 单笔订单收取10元邮费
                </view>
            </view>
        </view>
    </view>
</template>

<style lang="scss">
.service-panel {
    padding: 0 30rpx;
    border-radius: 10rpx 10rpx 0 0;
    position: relative;
    background-color: #fff;
}

.title {
    line-height: 1;
    padding: 40rpx 0;
    text-align: center;
    font-size: 32rpx;
    font-weight: normal;
    border-bottom: 1rpx solid #ddd;
    color: #444;
}

.close {
    position: absolute;
    right: 24rpx;
    top: 24rpx;
}

.content {
    padding: 20rpx 20rpx 100rpx 20rpx;

    .item {
        margin-top: 20rpx;
    }

    .dt {
        margin-bottom: 10rpx;
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
        position: relative;

        &::before {
            content: '';
            width: 10rpx;
            height: 10rpx;
            border-radius: 50%;
            background-color: #eaeaea;
            transform: translateY(-50%);
            position: absolute;
            top: 50%;
            left: -20rpx;
        }
    }

    .dd {
        line-height: 1.6;
        font-size: 26rpx;
        color: #999;
    }
}
</style>